

import { Component } from "react";
import {
  Button,
  Cell,
  Empty,
  Avatar,
  Grid,
  Image,
  Tabs,
  Table,
} from "@nutui/nutui-react-taro";
import styles from "./index.scss";
import { useModel } from "@/store";
import Taro, { useRouter } from "@tarojs/taro";
import { useState } from "react";
import { queryTestInfo, queryTestResult } from "@/services/report";
import { useEffect } from "react";
import { formatDate, calculateTime } from "@/utils/repeated";
import { useRef } from "react";
import Layout from "@/components/Layout";
import NoData from "@/components/NoData";

// import { IconFont } from "@nutui/icons-react-taro";
export default () => {
  const { params } = useRouter();

  const { testAppointNo, itemNo } = params;

  const [data, setData] = useState({});
  const [resultList, setResultList] = useState([]);

  const ref = useRef();

  const getResultList = () => {
    queryTestResult({
      testAppointNo,
      itemNo,
      pageSize: "999",
      pageNo: "1",
    }).then((res) => setResultList(res));
  };

  useEffect(() => {
    queryTestInfo({ testAppointNo, itemNo }).then((res) => {
      setData(res);
      if (res.confirmDate) {
        getResultList();
      }
    });
  }, [testAppointNo, itemNo]);

  const columns = [
    {
      title: "项目名称",
      key: "itemName",
      align: "center",
      render: (row) => {
        return (
          <view style={{...row.tip ? { color: "red" } : {}}}>{row.itemName}</view>
        );
      },
    },
    {
      title: "结果",
      key: "resultValue",
      align: "center",
      render: (row) => {
        return (
          <view style={row.tip ? { color: "red" } : {}}>{row.resultValue}</view>
        );
      },
    },
    {
      title: "单位",
      key: "measureUnit",
      align: "center",
      render: (row) => {
        return (
          <view style={row.tip ? { color: "red" } : {}}>{row.measureUnit}</view>
        );
      },
    },
    {
      title: "异常",
      key: "tip",
      align: "center",
      render: (row) => {
        // const query = Taro.createSelectorQuery();
        // query
        //   .select(`#${testAppointNo}`)
        //   .boundingClientRect(function(res) {
        //     res.top; // 这个组件内 #the-id 节点的上边界坐标

        //   })
        //   .exec();

        return <view style={{ color: "red" }}>{row.tip}</view>;
      },
    },
    {
      title: "参考范围",
      key: "referenceValue",
      align: "center",
      render: (row) => {
        return (
          <view style={row.tip ? { color: "red" } : {}}>
            {row.referenceValue}
          </view>
        );
      },
    },
  ];

  return (
    <Layout title="检查报告">
    <view className={styles.reportWarp}>
      {!data.confirmDate && <NoData msg='报告未出，请耐心等待'></NoData> }
      {resultList?.length > 0 && (
        <Table
          id={testAppointNo}
          columns={columns}
          data={resultList}
          style={{ "--nutui-table-cols-padding": "10px 4px",overflow:'auto',maxHeight:'calc(100vh - var(--head-height) - env(safe-area-inset-bottom))',fontSize:'12px',width:'100%' }}
        />
      )}
    </view>
    </Layout>
  );
};
